<template>
  <el-drawer
    :wrapper-closable="false"
    title="已关联用户"
    size="50%"
    append-to-body
    :visible.sync="innerValue"
    :close-on-click-modal="false"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col p-[16px] pb-[70px] pt-[16px]">
      <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
        <!-- 行表单 -->
        <el-row>
          <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input
                v-model.trim="formInline.username"
                size="small"
                class="common-query-form-item-width-sm"
                placeholder="用户账号"
                clearable
                @keydown.enter.native="getDataList"
                @input="input"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model.trim="formInline.realName"
                size="small"
                clearable
                class="common-query-form-item-width-sm"
                placeholder="用户姓名"
                @keydown.enter.native="getDataList"
                @input="input"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <t-button class="common-search-btn" type="primary" size="small" @click="getDataList">查 询</t-button>
            </el-form-item>
            <el-form-item>
              <t-button class="exportClass" svgIcon="ic-btn-add-primary" @click="addRelation">添 加</t-button>
              <t-button class="bg-danger" svgIcon="ic-btn-delete-red" @click="canale(false)">批量取消关联</t-button>
            </el-form-item>
          </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table height="100%" :data="tableData" row-key="id" @selection-change="handleSelectionChange">
          <el-table-column reserve-selection type="selection" width="40" center></el-table-column>
          <el-table-column type="index" label="序号" width="60" :index="columnIndex" />
          <el-table-column prop="username" label="用户账号"> </el-table-column>
          <el-table-column prop="realName" label="用户姓名"> </el-table-column>
          <el-table-column class-name="!px-[0px]" label="操作" align="left" fixed="right" width="100">
            <template #default="{ row }">
              <div>
                <span class="color-danger cursor-pointer" @click="canale(row)">取消关联</span>
              </div>
            </template>
          </el-table-column>
          <template slot="empty">
            <t-empty-data />
          </template>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          :current-page="pagination.page"
          :total="pagination.total"
          :page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :layout="pagination.layout"
          :hide-on-single-page="false"
          class="pt-[20px]"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
      <footer class="common-drawer-footer">
        <!-- <el-button class="min-w-[160px]  p-[0] text-[14px]" type="primary" @click="onSubmit">提 交</el-button> -->
        <el-button class="common-search-btn" style="margin-left: 0" plain @click="innerValue = false">取 消</el-button>
      </footer>
    </div>
    <DetailDrawerAddRelation :id="id" v-model="detailDrawerAddRelation" :code="code" @addFinish="addFinish" />
  </el-drawer>
</template>

<script>
import paginationMixin from "./mixin/pagination";
import DetailDrawerAddRelation from "./DetailDrawerAddRelation.vue";
import vModelMixin from "@/mixin/v-model";
import { systemRoleCancelUserRole, systemRoleUser } from "@/api/role";

export default {
  name: "DetailDrawers",
  components: { DetailDrawerAddRelation },
  mixins: [vModelMixin, paginationMixin],
  props: {
    value: {
      type: [Boolean],
      required: true,
    },
    id: {
      type: [String, Number],
      required: true,
      default: "",
    },
    code: {
      type: [String, Number],
      required: true,
      default: "",
    },
  },
  data() {
    return {
      multipleSelection: [],
      detailDrawerAddRelation: false,
      formInline: {},
      tableData: [],
      currentPage1: 1,
      total: 0,
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(newValue) {},
    },
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onSubmit() {},
    addRelation() {
      this.detailDrawerAddRelation = true;
    },

    async canale(row) {
      if (row) {
        //取消关联
        try {
          await this.$confirm(`确定取消关联「${row.username}」吗？`, "确认信息", {
            type: "warning",
            cancelButtonClass: "common-confirm-cancel-btn",
            confirmButtonClass: "common-confirm-confirm-btn",
          });
          try {
            await systemRoleCancelUserRole({ roleCode: this.code, userIds: [row.id] });
            this.onFinish();
          } catch (e) {
            //no-op
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        //批量取消关联
        if (this.multipleSelection.length) {
          try {
            await this.$confirm(`确定取消关联「${this.multipleSelection[0].username}」吗？`, "确认信息", {
              type: "warning",
              cancelButtonClass: "common-confirm-cancel-btn",
              confirmButtonClass: "common-confirm-confirm-btn",
            });
          } catch (error) {
            console.log(error);
          }
          await systemRoleCancelUserRole({
            roleCode: this.code,
            userIds: this.multipleSelection.map((item) => item.id),
          });
          this.onFinish();
        } else {
          this.$message.warning("请先勾选数据");
        }
      }
    },
    input() {
      if (this.formInline.username?.length === 0 || this.formInline.realName?.length === 0) {
        this.getDataList();
      }
    },
    addFinish() {
      this.getDataList();
    },
    onFinish() {
      this.$message.success("修改成功");
      this.innerValue = false;
      this.getDataList();
    },
    handleSizeChange() {},
    getDataList(param) {
      systemRoleUser({
        ...this.getParams(param),
        username: this.formInline.username,
        realName: this.formInline.realName,
        roleCode: this.code,
      }).then((res) => {
        this.tableData = res.content;
        this.pagination.total = res.totalElements;
      });
    },
    async onDrawerOpen() {
      this.getDataList();
      this.$nextTick(() => this.$refs["form"].clearValidate());
    },
    onDrawerClosed() {
      this.formInline.username = "";
      this.formInline.realName = "";
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-form-item__content {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-table__empty-text {
  width: 100%;
}
</style>
